<template>
  <div class="dashboard">
    <canvas id="myCanvas" />
  </div>
</template>

<script>
export default {
  mounted() {
    const width = document.getElementById('myCanvas').width
    const height = document.getElementById('myCanvas').height
    const ctx = document.getElementById('myCanvas').getContext('2d')
    /** 生成数组，并写入0*/
    const arr = Array(Math.ceil(width / 10)).fill(0)
    /** 文字数组*/
    const arrstr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.split('')

    ctx.fillStyle = 'rgba(0,0,0,0.05)'
    ctx.fillRect(0, 0, width, height)
    ctx.fillStyle = '#0f0'
    /** 、
     * 绘制文字，随机取字 arrstr[Math.floor(Math.random() * arrstr.length)]
     * index * 10文字出现X的位置，10为每行宽度
     *  value + 10 Y轴位置
     * */
    function rain() {
      // 这里的重点就是每次调用这个方法的时候都会重新绘制一张透明度为0.05的黑色画布来覆盖前图
      // 所以就会形成人眼中的下雨效果
      ctx.fillStyle = 'rgba(0,0,0,0.05)'
      ctx.fillRect(0, 0, width, height)
      ctx.font = '14px 华文行楷'
      ctx.fillStyle = '#0f0'
      arr.forEach((value, index) => {
        ctx.fillText(
          arrstr[Math.floor(Math.random() * arrstr.length)],
          index * 10,
          value + 10
        )
        arr[index] =
          value >= height || value > 8888 * Math.random() ? 0 : value + 10
      })
    }
    // 因为后面一个字50px,所以用总宽度除以50恰好够用,不至于浪费资源
    let arr1 = Array(Math.ceil(width / 20)).fill(0)
    arr1 = arr1.map((res) => 8888 * Math.random() + 20)
    // 这里为了不出现下坠的视觉效果，所以加了很多空格，大家感兴趣可以把空格去了，自己看看什么效果。
    const str1 = '临兵斗者皆阵列前行乾坤震巽坎兑'.split('')
    function rain1() {
      ctx.fillStyle = 'rgba(0,0,0,0.05)'
      ctx.fillRect(0, 0, width, height)
      ctx.fillStyle = '#f00'
      arr1.forEach((value, index) => {
        ctx.font = '20px 华文行楷'
        ctx.fillText(
          str1[Math.floor(Math.random() * str1.length)],
          index * 20,
          value + 20
        )
        arr1[index] = 8888 * Math.random() + 20
      })
    }
    setInterval(rain1, 1000 / 30)
    // setInterval(rain, 1000 / 30)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  flex: 1;
  background: #ccc;
}
#myCanvas {
  width: 100%;
  height: 100%;
}
</style>
